{% extends 'user/base.html' %}
{% block content %}
<style>
    .text-truncate {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
</style>

<section class="slice pt-2 bg-surface-secondary">
    <div class="container mt-4 mb-5 pl-6  ">
        <div class="row">
            <div class="col col-md-3 mb-sm-4">
                <div class="col col-md12">
                    <div class="card-header pb-2 list-group-item-info">
                        个人信息
                    </div>
                    <ul class="list-group list-group-flush" id="myList">
                        <li class="list-group-item"><a href="{{ url_for('users.userInfo') }}" class="link-primary">个人资料</a></li>
                        <li class="list-group-item"><a href="{{ url_for('address.address_management') }}" class="link-primary">地址管理</a></li>
                        <li class="list-group-item"><a href="{{ url_for('user.order_management') }}" class="link-primary">订单管理</a></li>
                        <li class="list-group-item" style="background-color: #cefaff;">
                            <a href="{{ url_for('story.upload_story') }}" class="link-primary">上传故事管理</a>
                        </li>
                    </ul>
                    <div class="card-footer pb-2 list-group-item-info">
                        <p></p>
                    </div>
                </div>
            </div>
            <div class="col col-md-8 col-sm-12 ml-2 p-5 resume_box_body">
                <div class="container">
                    <h2 class="text-center">我的故事文章</h2>
                    <p>欢迎，{{ user.username }}！</p>  <!-- 显示用户信息 -->
                    {% with messages = get_flashed_messages(with_categories=true) %}
                        {% if messages %}
                            <div class="alert-container">
                                {% for category, message in messages %}
                                    <div class="alert alert-{{ category }}">{{ message }}</div>
                                {% endfor %}
                            </div>
                        {% endif %}
                    {% endwith %}
                    <div class="text-right mb-3">
                        <a href="{{ url_for('story.upload_article', art_id=0) }}" class="btn btn-primary">上传故事文章</a>
                    </div>

                    <h5 class="border-bottom pb-2">已上传的文章</h5>
                    <ul class="list-group">
                    {% for article in articles %}
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            <div>
                                <a href="{{ url_for('story.upload_article', art_id=article.id) }}" class="text-decoration-none">
                                    <strong>{{ article.title }}</strong>
                                    <p class="text-truncate" style="max-width: 300px;">{{ article.content }}</p>
                                </a>
                                <small class="text-muted">文章ID: {{ article.id }}</small>
                                <small class="text-muted">{{ article.published_date.strftime('%Y-%m-%d %H:%M:%S') }}</small>
                                <span class="text-muted ml-lg-2">发布状态:
                                    {% if article.status == 'pending' %}
                                    <span class="badge bg-primary">待审核</span>
                                    {% elif article.status == 'approved' %}
                                    <span class="badge bg-success">已发布</span>
                                    {% elif article.status == 'rejected' %}
                                    <span class="badge bg-danger">审核不通过，请重新编辑内容</span>
                                    {% else %}
                                    <span class="badge bg-primary">待审核</span>
                                    {% endif %}
                                </span>
                            </div>
                            <form action="{{ url_for('story.delete_article', art_id=article.id) }}" method="POST" class="ml-2">
                                <button type="submit" class="btn btn-danger btn-sm" onclick="return confirm('确定要删除这篇文章吗？');">删除</button>
                            </form>
                        </li>
                    {% else %}
                        <li class="list-group-item">您还没有上传任何文章。</li>
                    {% endfor %}
                </ul>
                </div>
            </div>
        </div>
    </div>
</section>

{% endblock %} 